<template>
  <div>

    <!--   头部搜索-->
    <el-card class="box-card" style="height: 70px">
      <el-form :inline="true" :model="searchForm" ref="searchForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="searchForm.categoryName" placeholder="请输入分类名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品类型" prop="medicineType">
          <el-select v-model="searchForm.medicineType" placeholder="选择药品类型" autocomplete="off">
            <el-option
              v-for=" a in drugList"
              :value="a.name"></el-option>
<!--            <el-option label="西药" value="西药"></el-option>-->
<!--            <el-option label="保健品" value="保健品"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchByType">搜索</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--   展开表单-->
    <!--      children: 'drugClassList'  drugClassList 要与后端Vo实体类方法名一样才行-->
    <el-table
      :data="typeList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="drugTypeId"
      :tree-props="{children: 'drugClassList', hasChildren: 'hasChildren'}">
      <el-table-column prop="drugTypeName" label="药品分类" width="250">
      </el-table-column>
      <el-table-column prop="medicineType" label="药品类型">
      </el-table-column>
      <el-table-column prop="manufacturer" label="生产厂家">
      </el-table-column>
      <el-table-column prop="specification" label="规格">
      </el-table-column>
      <el-table-column prop="medicineUnit" label="药品单位">
      </el-table-column>
      <el-table-column prop="price" label="药品单价">
      </el-table-column>
      <el-table-column prop="controls" label="操作" width="180">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="text" @click="viewDetails(scope.row)" v-if="scope.row.parentId !== 0 && scope.row.parentId !== 1">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 点击查看详情的弹框  -->
    <el-dialog title="药品详情" :visible.sync="dialogTableVisible" :fullscreen="true">
      <el-table :data="drugInformation" >
        <el-table-column property="drugTypeCode" label="药品分类编码" width="150"></el-table-column>
        <el-table-column property="drugTypeName" label="药品分类名称" width="200"></el-table-column>
        <el-table-column property="medicineType" label="药品类型"></el-table-column>
        <el-table-column property="manufacturer" label="生产厂家"></el-table-column>
        <el-table-column property="medicineType" label="药品类型"></el-table-column>
        <el-table-column property="specification" label="规格"></el-table-column>
        <el-table-column property="medicineUnit" label="药品单位"></el-table-column>
        <el-table-column property="price" label="药品单价"></el-table-column>
        <el-table-column property="shelfLife" label="生产日期"></el-table-column>
        <el-table-column property="upToTime" label="截至日期"></el-table-column>
        <el-table-column property="tradeChart" label="商品图"></el-table-column>
        <el-table-column property="inventory" label="库存数量"></el-table-column>
        <el-table-column property="drugDescription" label="药品描述"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {drugSearch, drugTypes,viewDetails} from "@/api/drugClassification/drugClassList";
import {search} from "@/api/drugProducts/drugList";

export default {
  name: "drugClassification",
  data() {
    return {
      typeList:[],
      drugList:[],
      drugInformation:[],
      searchForm:{
        categoryName:'',
        medicineType:'',
      },
      dialogTableVisible:false,
    }
  },
  methods: {
    // 查询 ，模糊查询 TODO:为完成
    searchByType(){
      console.log(this.searchForm.categoryName)
      console.log(this.searchForm.medicineType)
      drugSearch(
        {
          categoryName:this.searchForm.categoryName,
          medicineType:this.searchForm.medicineType,
        }
      ).then((res)=>{
          console.log(res.data)
          this.typeList = res.data;

        })
    },
    // 查所有树状结构,使用递归方法
    drugTypes(){
      drugTypes().then((res)=>{
        this.drugList = res.data;
        // console.log(res)
      })
    },
    //查看详情
    viewDetails(row){
      this.dialogTableVisible=true;
      // console.log(row.drugTypeId);
      viewDetails(row).then((res)=>{

        this.drugInformation.push(res.data)
        console.log(res.data)
      })
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.searchByType()
    this.drugTypes()
  }
}
</script>

<style scoped lang="scss">

</style>
